﻿@model TestOnlineProject.Models.Entities.Question
@using TestOnlineProject.Common
@using TestOnlineProject.Models.Entities
@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@{
    if (!String.IsNullOrEmpty(ViewBag.Msg))
    {
    <script>        alert("@ViewBag.Msg")</script>
    }
}
<script>
    $(document).ready(function () {
        $("#deactivate").click(function () {
            var con = confirm("Are you sure you want to deactivate this question?");
            if (con == true) {
                $.ajax({
                    url: "@Url.Content("~/Question/Deactivate")?ids=@Model.QuestionId" + "-",
                    type: 'GET',
                    success: function (data) {
                        if (data != null) {
                            alert(data);
                            window.location = "@Url.Content("~/Question/Details")?id=@Model.QuestionId";
                        }
                    }
                })
            }
        }); 

        

        $("#activate").click(function () {
            var con = confirm("Are you sure you want to activate this question?");
            if (con == true) {
                $.ajax({
                    url: "@Url.Content("~/Question/Activate")?ids=@Model.QuestionId" + "-",
                    type: 'GET',
                    success: function (data) {
                        if (data != null) {
                            alert(data);
                            window.location = "@Url.Content("~/Question/Details")?id=@Model.QuestionId";
                        }
                    }
                })
            }
        });

        $("#delete").click(function () {
            var con = confirm("Are you sure you want to delete this question?");
            if (con == true) {
                $.ajax({
                    url: "@Url.Content("~/Question/Delete")?ids=@Model.QuestionId" + "-",
                    type: 'GET',
                    success: function (data) {
                        if (data != null) {
                            alert(data);
                            var sectionId = $("input[name=sectionId]").val();
                            if (sectionId != "")
                            {
                                window.location = "@Url.Content("~/Question/Index")?subjectId=@Model.SubjectId&sectionId=" + sectionId;
                            }
                            else{
                                window.location = "@Url.Content("~/Question/Index")?subjectId=@Model.SubjectId";
                            }
                        }
                    }
                })
            }
        });
    })

    function AddQuestions(sectionId) {
        var val = "@Model.QuestionId" + "-";
        // Activate selected item.
        $.ajax({
            url: "@Url.Content("~/Section/AddQuestions")?sectionId=" + sectionId + "&ids=" + val,
            type: 'GET',
            success: function (data) {
                if (data != null) {
                    alert(data);
                    // Reload page with keep page states.
                    $.ajax({
                        url: "@Url.Content("~/Question/Index")?page=@ViewBag.Page&createdBy=@ViewBag.CreatedBy&questionTypeId=@ViewBag.QuestionTypeId&actualUser=@ViewBag.ActualUser&subjectId=@ViewBag.SubjectId&column=@ViewBag.Column&sort=@ViewBag.Sort&keyWord=@ViewBag.KeyWord&sectionId=@ViewBag.SectionId",
                        type: 'GET',
                        success: function (data) {
                            $("#unobtrusive").html(data);
                        }
                    });
                }
            }
        });
    }

    function RemoveQuestions(sectionId) {
        var val = "@Model.QuestionId" + "-";
        // Activate selected item.
        $.ajax({
            url: "@Url.Content("~/Section/RemoveQuestions")?sectionId=" + sectionId + "&ids=" + val,
            type: 'GET',
            success: function (data) {
                if (data != null) {
                    alert(data);
                    // Reload page with keep page states.
                    $.ajax({
                        url: "@Url.Content("~/Question/Index")?page=@ViewBag.Page&createdBy=@ViewBag.CreatedBy&questionTypeId=@ViewBag.QuestionTypeId&actualUser=@ViewBag.ActualUser&subjectId=@ViewBag.SubjectId&column=@ViewBag.Column&sort=@ViewBag.Sort&keyWord=@ViewBag.KeyWord&sectionId=@ViewBag.SectionId",
                        type: 'GET',
                        success: function (data) {
                            $("#unobtrusive").html(data);
                        }
                    });
                }
            }
        });
    }

    $('#tabs a').click(function(e) {
        e.preventDefault();
        $(this).tab('show');
    });

    function SendReport(id) {
        $("#report_content").html("<input type=\"hidden\" name=\"questionId\" id=\"vio_questionId\" /> <div style=\"text-align: center\"> <input type=\"text\" name=\"message\" pattern=\".{5,100}\" required placeholder=\"Message\" title=\"The Message length is 5-100 characters.\" style=\"width: 330px\" /> <button type=\"submit\" value=\"Send\" class=\"btn\"> Send</button> </div>");
        $("#vio_questionId").val(id);
    }
</script>
<div class="site_map">
    @Html.ActionLink("Home", "Index", "Home") / @Html.ActionLink("Subjects", "Index", "Subject")
    / @Html.ActionLink((ViewBag.Subject as Subject).Code, "Details", "Subject", new { id = (ViewBag.Subject as Subject).SubjectId }, null)
    /
    @{
        if (ViewBag.Section != null)
        {
        @Html.ActionLink("Sections", "Index", "Section", new { subjectId = (ViewBag.Subject as Subject).SubjectId }, null)
        <span>/</span>
        <span style="word-wrap: break-word">@Html.ActionLink((ViewBag.Section as Section).Name, "Index", "Question", new { subjectId = Model.SubjectId, sectionId = (ViewBag.Section != null ? ViewBag.Section.SectionId : 0) }, null)</span>
        <span>/</span>
        }
        else
        {
        @Html.ActionLink("Questions", "Index", "Question", new { subjectId = (ViewBag.Subject as Subject).SubjectId }, null)
        <span>/</span>
        }
    }
    <span style="word-wrap: break-word">@Model.Title</span>
</div>
<br />
<div class="main_nav">
    @{
        if (ViewBag.Section != null)
        {
        <span><a href="@Url.Content("~/Question")?subjectId=@Model.SubjectId&sectionId=@ViewBag.Section.SectionId">
            <img src="@Url.Content("~/Images/back button.png")" />
        </a></span>
        }
        else
        {
        <span><a href="@Url.Content("~/Question")?subjectId=@Model.SubjectId">
            <img src="@Url.Content("~/Images/back button.png")" />
        </a></span>
        }
    }
</div>
<br />
@{
    if (!Model.IsActivated)
    {
    <div class="alert alert-error">
        <span>Deactivated.</span>
    </div>
    }
}
@{
    if (ViewBag.Section != null)
    {
    <input type="hidden" value="@ViewBag.Section.SectionId" name="sectionId" />
    }
    else
    {
    <input type="hidden" value="" name="sectionId" />
    }
}
<table class="table table-bordered" style="table-layout: fixed">
    <tr>
        <td style="width: 150px; text-align: right">
            <span>Title</span>
        </td>
        <td>
            <div style="display: inline-block; float: right">
                <div class="btn-group">
                    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu pull-right">
                        <li class="dropdown-submenu pull-left">
                            <button class="btn btn-link" id="add_to_section">
                                Add to Section</button>
                            <ul class="dropdown-menu pull-right" style="width: 150px">
                                @{
                                    if ((ViewBag.SectionList as List<Section>).Count > 0)
                                    {
                                        foreach (var item in ViewBag.SectionList as List<Section>)
                                        {
                                    <li>
                                        <button style="white-space: normal; word-break: break-all; text-align: left" class="add_to_section btn btn-link" onclick="AddQuestions('@item.SectionId')">
                                            +&nbsp;@item.Name</button>
                                    </li>
                                        }
                                    }
                                    else
                                    {
                                    <li><span>&nbsp;No section.</span> </li>
                                    }
                                }
                            </ul>
                        </li>
                        <li class="dropdown-submenu pull-left">
                            <button class="btn btn-link" id="add_to_section">
                                Remove from Section</button>
                            <ul class="dropdown-menu pull-right" style="width: 150px">
                                @{
                                    if ((ViewBag.SectionList as List<Section>).Count > 0)
                                    {
                                        foreach (var item in ViewBag.SectionList as List<Section>)
                                        {
                                    <li>
                                        <button style="white-space: normal; word-break: break-all; text-align: left" class="add_to_section btn btn-link" onclick="RemoveQuestions('@item.SectionId')">
                                            +&nbsp;@item.Name</button>
                                    </li>
                                        }
                                    }
                                    else
                                    {
                                    <li><span>&nbsp;No section.</span> </li>
                                    }
                                }
                            </ul>
                        </li>
                    </ul>
                </div>
                @{
                    if (Model.UserId != int.Parse(HttpContext.Current.User.Identity.Name))
                    {
                    <a href="#myModal" role="button" data-toggle="modal" class="vio_report" onclick="SendReport('@Model.QuestionId')">
                        <img src="@Url.Content("~/Images/report.gif")"/></a>
                    }
                }
            </div>
            <span style="word-wrap: break-word">@Html.DisplayFor(model => model.Title)</span>
        </td>
    </tr>
    <tr>
        <td style="text-align: right">
            <span>Question</span>
        </td>
        <td>
            <span style="word-wrap: break-word">@Html.Raw(Model.Content.Replace("<", "&lt").Replace(">", "&gt"))</span>
        </td>
    </tr>
    <tr>
        <td style="width: 150px; text-align: right">
            <span>Type</span>
        </td>
        <td>
            @Html.DisplayFor(model => model.QuestionType.Name)
        </td>
    </tr>
    <tr>
        <td style="text-align: right">
            <span>Created By</span>
        </td>
        <td>
            @Html.ActionLink(@Model.User.FullName, "Index", "Account", new { id = @Model.UserId }, new { target = "_blank" })
        </td>
    </tr>
    @for (var i = 0; i < Model.Answers.Count; i++)
    {
        <tr>
            <td style="text-align: right">
                <span>Answer</span>
                @{
        var j = i + 1;
                    @j
                }
            </td>
            <td>
                <span style="word-wrap: break-word">@Html.Raw(Model.Answers.ToList()[i].Content.Replace("<", "&lt").Replace(">", "&gt"))</span>
                @{

        // If question type is matching.
        if (Model.QuestionTypeId == 3)
        {
                    <hr />
            if (Model.Matches != null)
            {
                    <span>Match:</span>
                    <span style="word-wrap: break-word">@Html.DisplayWithBreaksFor(model => model.Matches.ToList()[i].Content)</span>
            }
        }
                }
                <div>
                    <span>::Grade:</span> <span>@Math.Round(Model.Answers.ToList()[i].Grade, 2).ToString()</span>
                    <span>%</span>
                </div>
            </td>
        </tr>
    }
    @if (Model.Matches.Count > 0)
    {
        <tr>
            <td style="text-align: right">
                <span>Other Invalid Matchs</span>
            </td>
            <td>
                @for (var i = Model.Answers.Count; i < Model.Matches.Count; i++)
                {
                    <span style="word-wrap: break-word">@Html.DisplayFor(model => model.Matches.ToList()[i].Content)</span>
                    if (i < Model.Matches.Count - 1)
                    {
                    <hr />
                    }
                }
            </td>
        </tr>
    }
    <tr>
        <td style="text-align: right">
            <span>Explanation</span>
        </td>
        <td>
            <span style="word-wrap: break-word">@Html.Raw(Model.Explanation)</span>
        </td>
    </tr>
    @{
        if (HttpContext.Current.User.IsInRole("1") || int.Parse(HttpContext.Current.User.Identity.Name) == Model.UserId)
        {
        <tr>
            <td>
            </td>
            <td>
                @{
            if (HttpContext.Current.User.IsInRole("1") || int.Parse(HttpContext.Current.User.Identity.Name) == Model.UserId)
            {
                    @Html.ActionLink("Edit", "Edit", new { id = @Model.QuestionId, sectionId = (@ViewBag.Section == null ? 0 : @ViewBag.Section.SectionId) })
                    <span>|</span>
                    <a href="#" id="delete">Delete</a>
            }
            if (HttpContext.Current.User.IsInRole("1"))
            {
                    <span>|</span>
                if (Model.IsActivated)
                {
                    <a href="#" id="deactivate">Deactivate</a>
                }
                else
                {
                    <a href="#" id="activate">Activate</a>
                }
            }
                }
            </td>
        </tr>
        }
    }
</table>
<div class="accordion" id="accordion2" style="margin: 0px">
    <div class="accordion-group" style="border: 0px">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"
                style="padding: 0px">>>More Details </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse" style="border: 0px">
            <div class="accordion-inner" style="padding: 0px; padding-top: 5px; border: 0px">
                <table class="table table-bordered">
                    <tr>
                        <td style="width: 150px; text-align: right">
                            <span>Subject</span>
                        </td>
                        <td>
                            <span style="word-wrap: break-word">@Html.DisplayFor(model => model.Subject.Name)</span>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: right">
                            <span>Created Time</span>
                        </td>
                        <td>
                            @Html.DisplayFor(model => model.CreatedTime)
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: right">
                            <span>Last Edited Time</span>
                        </td>
                        <td>
                            @Html.DisplayFor(model => model.LastEditedTime)
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
<fieldset>
    <legend>Count Charts</legend>
    <ul class="nav nav-tabs" id = "tabs">
        <li class="active"><a href="#General" data-toggle="tab">General</a></li>
        <li><a href="#Detail" data-toggle="tab">Details</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade in active" id="General">
            <img src="@Url.Content("~/Question/PieChart")?questionId=@Model.QuestionId" id="pieChart"/>
        </div>
        <div class="tab-pane fade" id="Detail">
            <img src="@Url.Content("~/Question/ColumnChart")?questionId=@Model.QuestionId" id = "columnChart"/>
        </div>
    </div>
</fieldset>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            ×</button>
        <h3 id="myModalLabel">
            Report</h3>
    </div>
    <div class="modal-body">
        @using (Ajax.BeginForm("Create", "Report", null, new AjaxOptions
            {
                InsertionMode = InsertionMode.Replace,
                HttpMethod = "GET",
                UpdateTargetId = "report_content",
            }, new
                {
                    @class = "form-inline",
                    id = "form_violation"
                }))
        {
            <div id="report_content">
                <input type="hidden" name="questionId" id="vio_questionId" />
                <div style="text-align: center">
                    <input type="text" name="message" pattern=".{5,100}" required placeholder="Message"
                        title="The Message length is 5-100 characters." style="width: 330px" />
                    <button type="submit" value="Send" class="btn">
                        Send</button>
                </div>
            </div>
        }
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">
            Close</button>
    </div>
</div>
